<template>

	<Card :mode = "props.mode">
		<template #default>
			<el-form
				ref = "ruleFormRef"
				:model = "ruleForm"
				:rules = "rules"
				status-icon
			>
				<el-form-item label = "Username" prop = "username">
					<el-input v-model = "ruleForm.username" type = "text" autocomplete = "off" />
				</el-form-item>

				<el-form-item label = "Password" prop = "password">
					<el-input v-model = "ruleForm.password" type = "password" autocomplete = "off" />
				</el-form-item>

				<el-form-item v-if = "isRegister" label = "ConfirmPassword" prop = "confirmPassword">
					<el-input v-model = "ruleForm.confirmPassword" type = "password" autocomplete = "off" />
				</el-form-item>

				<el-form-item v-if = "isRegister" label = "Email" prop = "email">
					<el-input v-model = "ruleForm.email" type = "text" autocomplete = "off" />
				</el-form-item>

				<el-form-item>
					<el-button :loading = "isSubmitting" type = "primary" @click = "submitForm(ruleFormRef)">
						{{ commitText }}
					</el-button>
					<el-button @click = "resetForm(ruleFormRef)">重置</el-button>
					<el-button type = "info" @click = "emit('toggleMode')">
						切换{{ commitTextDisplay }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
	</Card>

</template>

<script lang = "ts" setup>
import { computed, reactive, ref } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import Card from '@/components/Card.vue'
import Api from '@/api'
import simpleRequest from '@/utils/requestUtils'
import { useRouter } from 'vue-router'
import useStore from '@/store'

//* props
const props = defineProps<{ mode: 'login' | 'register' }>()

//* emit
const emit = defineEmits(['toggleMode'])

//* router
const router = useRouter()

//* store
const { userStore } = useStore()

//? 表单ref 不能绑定 需要直接 ref = 'ruleFormRef'
const ruleFormRef = ref<FormInstance>()

//* 表单
const ruleForm = reactive({
	id: null,
	username: '',
	password: '',
	confirmPassword: '',
	email: ''
})

//* 验证规则
const rules = reactive<FormRules<typeof ruleForm>>({
	username: [
		{ required: true, message: '请输入用户名', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请输入确认密码', trigger: 'blur' },
		{
			validator: (_, value, callback) => value !== ruleForm.password ? callback(new Error('两次输入的密码不一致')) : callback(),
			trigger: ['blur', 'change']
		}
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
	]
})

//* 提交表单
const submitForm = (form) => {
	if (isSubmitting.value) return

	form?.validate((valid) => {
		if (!valid) return
		isSubmitting.value = true

		simpleRequest(isRegister.value ? Api.register : Api.login, ruleForm, (data) => {
			!isRegister.value ? userStore.setUser(data.data.user) & router.push('/') : emit('toggleMode')
		})

		isSubmitting.value = false
	})
}

//* 重置表单
const resetForm = (form) => {
	if (!form) return
	form.resetFields()
}

//* 是否显示注册项
const isRegister = computed(() => props.mode === 'register')

//* 显示登录/注册按钮
const commitText = computed(() => props.mode === 'login' ? '登录' : '注册')

//* 显示切换登录/注册按钮
const commitTextDisplay = computed(() => props.mode === 'login' ? '注册' : '登录')

//* 是否正在提交
const isSubmitting = ref(false)

</script>

<style scoped>

</style>